import React, {Component} from "react";
import {View, TouchableOpacity, Alert, StyleSheet, TextInput, Dimensions, Modal, Text, Image} from "react-native";
import ClosableModal from "rn-closable-modal";

const {width, height} = Dimensions.get('window');

export default class MineSexDialog extends Component {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            sex:this.props.sex,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
        this.setState({sex: nextProps.sex});
    }

    closeModal=(item)=> {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        if (item){
            this.props.callbackSex(item)
        } else {
            this.props.callbackSex(this.props.sex)

        }
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                >
                    <View style={styles.white_background}>
                        <TouchableOpacity onPress={()=>{this.closeModal('男')}} style={{backgroundColor:"white",width:331,height:42,justifyContent:'center',alignItems:'center',}}>
                            <Text style={{color:'black',fontSize:13,}}>男</Text>
                        </TouchableOpacity>
                        <View style={{width:310,height:1,marginLeft:15,backgroundColor:'rgba(0,0,0,0.1)'}}/>
                        <TouchableOpacity onPress={()=>{this.closeModal('女')}} style={{backgroundColor:"white",width:331,height:42,justifyContent:'center',alignItems:'center',}}>
                            <Text style={{color:'black',fontSize:13,}}>女</Text>
                        </TouchableOpacity>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent:'center',
        alignItems:'center',
    },

    white_background:{
        width:331,
        height:84,
        backgroundColor:'white',
        borderRadius:4,
        alignItems:'center',
    },
});